<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>jindo.Pagination - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class=""><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="selected">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


	
<div class="snb depth2 scrollbar">
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<h3 class="blind">jindo.Pagination 클래스</h3>
			<div class="smanuals">
		
				<h3>보기 옵션</h3>
				<ul class="api-options">
					<li class="api-show-inherited">
						<span id="checkbox-inherited">
							<span class="checkbox-mark checkbox-checked"></span>
							<input type="checkbox" id="api-show-inherited">
						</span><label for="api-show-inherited">상속받은 항목</label>

					</li>
					<li class="api-show-deprecated">
						<span id="checkbox-deprecated">
							<span class="checkbox-mark"></span>
							<input type="checkbox" id="api-show-deprecated">
						</span><label for="api-show-deprecated">폐지예정 항목</label>
					</li>
				</ul>
	
		        
		            <h3><a href="#manual">매뉴얼</a></h3>
		
		            <ul class="manuals">
		                
		                    <li class="manual">
		                        <a href="#manual_af6957afdf5521abe54de4a63ddebc0c">기능</a>
		                    </li>
		                
		                    <li class="manual">
		                        <a href="#manual_4fa68f37d5d96f4872d80320d5dc409a">옵션에 따른 동작</a>
		                    </li>
		                
		                    <li class="manual">
		                        <a href="#manual_cbd30bb38edc7ffc879aabd5f479a2c7">기본 초기화 형태</a>
		                    </li>
		                
		            </ul>
		        

		        
		            <h3><a href="#demo">데모</a></h3>
		        
		
		        
		            <h3><a href="#constructor">생성자</a></h3>
		
		            <ul class="constructors extends">
		                
		                    <li class="">
		                        <a href="#constructor_jindo.Pagination">
		                            Pagination
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
				
		        
		
		        
		            <h3><a href="#method">메서드</a></h3>
		
		            <ul class="methods extends">
		                
		                    <li class=" inherited-item">
		                        <a href="#method_activate" title="컴포넌트를&nbsp;활성화한다.
_onActivate&nbsp;메서드를&nbsp;수행하므로&nbsp;반드시&nbsp;상속받는&nbsp;클래스에&nbsp;_onActivate&nbsp;메서드가&nbsp;정의되어야한다.">
		                            activate()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_attach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;등록한다.">
		                            attach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_deactivate" title="컴포넌트를&nbsp;비활성화한다.
_onDeactivate&nbsp;메서드를&nbsp;수행하므로&nbsp;반드시&nbsp;상속받는&nbsp;클래스에&nbsp;_onDeactivate&nbsp;메서드가&nbsp;정의되어야한다.">
		                            deactivate()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_detach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_detachAll" title="등록된&nbsp;모든&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detachAll()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_fireEvent" title="이벤트를&nbsp;발생시킨다.">
		                            fireEvent()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getBaseElement" title="기준&nbsp;엘리먼트를&nbsp;구한다.">
		                            getBaseElement()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getCurrentPage" title="현재&nbsp;페이지를&nbsp;리턴한다.">
		                            getCurrentPage()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getFirstItemOfPage" title="해당&nbsp;페이지의&nbsp;첫번째&nbsp;아이템이&nbsp;전체&nbsp;중&nbsp;몇&nbsp;번째&nbsp;아이템인지&nbsp;구한다.">
		                            getFirstItemOfPage()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getItemCount" title="전체&nbsp;아이템의&nbsp;개수를&nbsp;리턴한다.">
		                            getItemCount()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getItemPerPage" title="한&nbsp;페이지에&nbsp;보여줄&nbsp;아이템의&nbsp;개수를&nbsp;구한다.">
		                            getItemPerPage()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getPageOfItem" title="아이템의&nbsp;인덱스로부터&nbsp;몇번째&nbsp;페이지인지를&nbsp;구한다.">
		                            getPageOfItem()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_isActivating" title="컴포넌트의&nbsp;활성여부를&nbsp;가져온다.">
		                            isActivating()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_movePageTo" title="지정한&nbsp;페이지로&nbsp;이동하고&nbsp;페이지&nbsp;목록을&nbsp;다시&nbsp;그린다.
이동하기전&nbsp;beforeMove,&nbsp;이동후에&nbsp;move&nbsp;커스텀&nbsp;이벤트를&nbsp;발생한다.">
		                            movePageTo()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_option" title="옵션&nbsp;값을&nbsp;가져온다.">
		                            option()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_optionSetter" title="옵션의&nbsp;setter&nbsp;함수를&nbsp;가져온다.&nbsp;
옵션의&nbsp;setter&nbsp;함수는&nbsp;지정된&nbsp;옵션이&nbsp;변경되면&nbsp;수행되는&nbsp;함수이다.">
		                            optionSetter()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_reset" title="페이징을&nbsp;다시&nbsp;그린다.">
		                            reset()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_setItemCount" title="전체&nbsp;아이템의&nbsp;개수를&nbsp;설정한다.">
		                            setItemCount()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_setItemPerPage" title="한&nbsp;페이지에&nbsp;보여줄&nbsp;아이템의&nbsp;개수를&nbsp;설정한다.">
		                            setItemPerPage()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
		
		        
		
		        
		            <h3><a href="#event">이벤트</a></h3>
		
		            <ul class="events extends">
		                
		                    <li class="">
		                        <a href="#event_beforeMove" title="페이지&nbsp;이동이&nbsp;수행되기&nbsp;직전에&nbsp;발생">
		                            beforeMove
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_click" title="페이지&nbsp;이동을&nbsp;위한&nbsp;숫자나&nbsp;버튼을&nbsp;클릭했을때&nbsp;발생">
		                            click
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_move" title="페이지&nbsp;이동이&nbsp;완료된&nbsp;시점에서&nbsp;발생">
		                            move
		                            
		                            
		                        </a>   
		                    </li>
		                
		            </ul>
		        
		
		        
	
			</div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>

<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				
<!-- content -->
<div class="content">
	<h1 class="blind">
		Pagination
	</h1>

	<div class="tc-panel first">
		<dl class="relation">
		<dt>클래스</dt>
		<dd>jindo.Pagination
		    
	        
			<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l6" title="view source code"><span class="blind">소스코드</span></a></span>
		</dd>

	    
	        <dt>상속</dt>
	        <dd>
	        	<a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a>
	        	<span class="arrow">→</span><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a>
	        </dd>
	    

	    
		
	    
		
	    
		
		</dl>

		
		
		<div class="description"><p>리스트에 페이지 목록 매기고 페이지에 따른 네비게이션을 구현한 컴포넌트
기본 목록은 마크업에 static하게 정의되어있고, 페이지 이동을위해 클릭시마다 보여줄 아이템 목록을 Ajax Call을 통해 받아온다.
페이지 컴포넌트가 로드되면 .loaded 클래스명이 추가된다.</p></div>
		
		

	    
	    
		<div class="qr_code">
			<strong>QR code</strong>
		
			<div id="QRView">
			<script type="text/javascript">

				document.write([
					'<img src="http://chart.apis.google.com/chart?cht=qr&chs=220x220&chl=',
					encodeURIComponent(location.href.replace(/#.*$/, '')),
					'&choe=UTF-8" />'
				].join(''));

			</script>
			</div>
		</div>	    
	    
		
	</div>

	<div class="tc-panel panel">

        
			<h2 class="noline">생성자</h2>
			
			<table class="tbl_board">
			<caption class="hide">생성자</caption>
			<colgroup>
			<col style="width:22px">
			<col />
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">생성자</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#constructor_jindo.Pagination" class="name">jindo.Pagination</a>
(sId:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a> | <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>, [htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])
 
						<p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
			</tbody>
			</table>
		

        

        
			<h2 class="noline">메서드</h2>
			
			<table class="tbl_board">
			<caption class="hide">메서드</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">메서드</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_activate" class="name">activate</a>
( )
:<a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>컴포넌트를 활성화한다.
_onActivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onActivate 메서드가 정의되어야한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_attach" class="name">attach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>커스텀 이벤트 핸들러를 등록한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_deactivate" class="name">deactivate</a>
( )
:<a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>컴포넌트를 비활성화한다.
_onDeactivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onDeactivate 메서드가 정의되어야한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_detach" class="name">detach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_detachAll" class="name">detachAll</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_fireEvent" class="name">fireEvent</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>이벤트를 발생시킨다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getBaseElement" class="name">getBaseElement</a>
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
						<p><p>기준 엘리먼트를 구한다.</p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getCurrentPage" class="name">getCurrentPage</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>
 
						<p><p>현재 페이지를 리턴한다.</p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getFirstItemOfPage" class="name">getFirstItemOfPage</a>
(n:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>
 
						<p><p>해당 페이지의 첫번째 아이템이 전체 중 몇 번째 아이템인지 구한다.</p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getItemCount" class="name">getItemCount</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>
 
						<p><p>전체 아이템의 개수를 리턴한다.</p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getItemPerPage" class="name">getItemPerPage</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>
 
						<p><p>한 페이지에 보여줄 아이템의 개수를 구한다.</p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getPageOfItem" class="name">getPageOfItem</a>
(n:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>
 
						<p><p>아이템의 인덱스로부터 몇번째 페이지인지를 구한다.</p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_isActivating" class="name">isActivating</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>컴포넌트의 활성여부를 가져온다.</p></p>
					</td>
					<td><a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_movePageTo" class="name">movePageTo</a>
(nPage:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, [bFireEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>])
 
						<p><p>지정한 페이지로 이동하고 페이지 목록을 다시 그린다.
이동하기전 beforeMove, 이동후에 move 커스텀 이벤트를 발생한다.</p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_option" class="name">option</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>옵션 값을 가져온다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_optionSetter" class="name">optionSetter</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_reset" class="name">reset</a>
(nItemCount:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>)
 
						<p><p>페이징을 다시 그린다.</p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_setItemCount" class="name">setItemCount</a>
(n:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>)
 
						<p><p>전체 아이템의 개수를 설정한다.</p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_setItemPerPage" class="name">setItemPerPage</a>
(n:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
 
						<p><p>한 페이지에 보여줄 아이템의 개수를 설정한다.</p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
			</tbody>
			</table>
        

        
			<h2 class="noline">이벤트</h2>
			
			<table class="tbl_board">
			<caption class="hide">이벤트</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">이벤트</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_beforeMove" class="name">beforeMove</a>
						<p><p>페이지 이동이 수행되기 직전에 발생</p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_click" class="name">click</a>
						<p><p>페이지 이동을 위한 숫자나 버튼을 클릭했을때 발생</p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_move" class="name">move</a>
						<p><p>페이지 이동이 완료된 시점에서 발생</p></p>
					</td>
					<td>jindo.Pagination</td>
					</tr>
	            
			</tbody>
			</table>
        			
	</div>

    
        <div class="tc-panel">
			<h2 id="manual">매뉴얼</h2>
            
				<div id="manual_af6957afdf5521abe54de4a63ddebc0c" class="manual item">
				    <h3>기능</h3>
				    <div class="description"><p>페이지네이션(Pagination)이란 책,웹 페이지 등에 페이지를 매기는 것을 의미한다.
jindo.Pagination은 생성 시 다양한 옵션들을 설정함으로서 페이지를 어떻게 매기고 사용자에게 어떻게 보여줄 지를 결정하게 해주는 컴포넌트이다.</p>

<p><img src="..\..\..\resource/jindo.Pagination/example.png" alt="" title="" /></p></div>
				</div>
            
				<div id="manual_4fa68f37d5d96f4872d80320d5dc409a" class="manual item">
				    <h3>옵션에 따른 동작</h3>
				    <div class="description"><h4>nItemPerPage</h4>

<p>아래의 이미지는 100개의 아이템에서 nItemPerPage를 10으로 설정한 경우이다.</p>

<p><img src="..\..\..\resource/jindo.Pagination/nItemPerPage10.png" alt="" title="" /></p>

<p>아래의 이미지는 100개의 아이템에서 nItemPerPage를 20으로 설정한 경우이다.</p>

<p><img src="..\..\..\resource/jindo.Pagination/nItemPerPage20.png" alt="" title="" /></p>

<h4>nPagePerPageList</h4>

<p>아래의 이미지는 5로 설정한 경우이다.</p>

<p><img src="..\..\..\resource/jindo.Pagination/nPagePerPageList5.png" alt="" title="" /></p>

<p>아래의 이미지는 7로 설정한 경우이다.</p>

<p><img src="..\..\..\resource/jindo.Pagination/nPagePerPageList7.png" alt="" title="" /></p>

<h4>bAlignCenter</h4>

<p>bAlignCenter 옵션을 true 로 설정하면 아래와 같이 보여지며 동작한다.</p>

<p><img src="..\..\..\resource/jindo.Pagination/bAlignCenter.png" alt="" title="" /></p>

<h4>sInsertTextNode</h4>

<p>sInsertTextNode 에 내용에 따라 아래와 마크업이 변경 반영된다.</p>

<p><img src="..\..\..\resource/jindo.Pagination/sInsertTextNode.png" alt="" title="" /></p>

<h4>sPageTemplate</h4>

<p>아래 이미지는 sPageTemplate을 &lt;li&gt;&lt;a href="#"&gt;{=page}&lt;/a&gt;&lt;/li&gt;로 설정한 경우의 마크업이다.</p>

<p><img src="..\..\..\resource/jindo.Pagination/sPageTemplate.png" alt="" title="" /></p>

<h4>sCurrentPageTemplate</h4>

<p>아래 이미지는 sCurrentPageTemplate을 &lt;li class="active"&gt;&lt;a href="#"&gt;{=page}&lt;/a&gt;&lt;/li&gt;로 설정한 경우의 마크업이다.</p>

<p><img src="..\..\..\resource/jindo.Pagination/sCurrentPageTemplate.png" alt="" title="" /></p>

<h4>elFirstPageLinkOn</h4>

<p><img src="..\..\..\resource/jindo.Pagination/elFirstPageLinkOn.png" alt="" title="" /></p>

<h4>elPrevPageLinkOn</h4>

<p><img src="..\..\..\resource/jindo.Pagination/elPrevPageLinkOn.png" alt="" title="" /></p>

<h4>elNextPageLinkOn</h4>

<p><img src="..\..\..\resource/jindo.Pagination/elNextPageLinkOn.png" alt="" title="" /></p>

<h4>elLastPageLinkOn</h4>

<p><img src="..\..\..\resource/jindo.Pagination/elLastPageLinkOn.png" alt="" title="" /></p>

<h4>elFirstPageLinkOff</h4>

<p><img src="..\..\..\resource/jindo.Pagination/elFirstPageLinkOff.png" alt="" title="" /></p>

<h4>elPrevPageLinkOff</h4>

<p><img src="..\..\..\resource/jindo.Pagination/elPrevPageLinkOff.png" alt="" title="" /></p>

<h4>elNextPageLinkOff</h4>

<p><img src="..\..\..\resource/jindo.Pagination/elNextPageLinkOff.png" alt="" title="" /></p>

<h4>elLastPageLinkOff</h4>

<p><img src="..\..\..\resource/jindo.Pagination/elLastPageLinkOff.png" alt="" title="" /></p></div>
				</div>
            
				<div id="manual_cbd30bb38edc7ffc879aabd5f479a2c7" class="manual item">
				    <h3>기본 초기화 형태</h3>
				    <div class="description"><h4>HTML</h4>

<pre class="code"><code class="prettyprint">&lt;!-- 로드되기 전의 구조 (기본 구조) --&gt;
&lt;div id="pagination"&gt;
    &lt;a href="#" class="pre_end"&gt;맨앞&lt;/a&gt;
    &lt;a href="#" class="pre"&gt;이전&lt;/a&gt;
    &lt;a href="#" class="next"&gt;다음&lt;/a&gt;
    &lt;a href="#" class="next_end"&gt;맨뒤&lt;/a&gt;
&lt;/div&gt;
&lt;!-- 로드되기 전의 구조 (맨앞/맨뒤 버튼 없음) --&gt;
&lt;div id="pagination"&gt;
    &lt;a href="#" class="pre"&gt;이전&lt;/a&gt;
    &lt;a href="#" class="next"&gt;다음&lt;/a&gt;
&lt;/div&gt;
&lt;!-- 로드되기 전의 구조 (이전/다음페이지 버튼은 클릭할수 없어도 항상 보임) --&gt;
&lt;div id="pagination"&gt;
    &lt;span class="pre"&gt;이전페이지&lt;/span&gt;
    &lt;span class="next"&gt;다음페이지&lt;/span&gt;
    &lt;a href="#" class="pre"&gt;이전페이지&lt;/a&gt;
    &lt;a href="#" class="next"&gt;다음페이지&lt;/a&gt;
&lt;/div&gt;
&lt;!-- 로드된 이후 페이지가 생성된 결과 --&gt;
&lt;div id="pagination" class="loaded"&gt;
    &lt;!-- 이전/다음/맨앞/맨뒤 버튼을 추가하였고 5개의 페이지를 목록에서 보도록 설정한 경우 --&gt;
    &lt;!-- 클릭할 수 없는 경우 노출되지 않거나 span으로 대체됨 --&gt;
    &lt;a class="pre_end" href="#"&gt;맨앞&lt;/a&gt;
    &lt;a class="pre" href="#"&gt;이전&lt;/a&gt;
    &lt;strong class="first-child"&gt;1&lt;/strong&gt;
    &lt;a href="#"&gt;2&lt;/a&gt;
    &lt;a href="#"&gt;3&lt;/a&gt;
    &lt;a href="#"&gt;4&lt;/a&gt;
    &lt;a href="#" class="last-child"&gt;5&lt;/a&gt;
    &lt;a class="next" href="#"&gt;다음&lt;/a&gt;
    &lt;a class="next_end" href="#"&gt;맨뒤&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>추가하고 싶은 엘리먼트 요소들을 jindo.Pagination으로 생성할 엘리먼트 안에 정의하면 해당하는 엘리먼트가 생성된다.</p>

<h4>Javascript</h4>

<pre class="code"><code class="prettyprint">//200개의 항목들을 10개씩, 한 페이지에는 5개의 페이지 목록씩 보여주는 페이지네이션 생성
var oPagination = new jindo.Pagination(jindo.$("pagination"), {
    nItem: 200,
    nItemPerPage: 10,
    nPagePerPageList: 5
});
</code></pre></div>
				</div>
            
        </div>
    

	
		<div class="tc-panel">
			<h2 id="constructor">생성자 세부 정보</h2>
	        
	            <div id="constructor_jindo.Pagination" class="constructor item">
	<h3>jindo.Pagination()
		<span>생성자</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l18" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>new jindo.Pagination
(sId:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a> | <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>, [htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])</code></div>
	<div class="description"></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sId</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a> | <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">페이지목록을 생성할 엘리먼트 id 혹은 엘리먼트 자체</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name optional">htOption</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">옵션 객체</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name optional">bActivateOnload</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
        <span class="default">(기본값 : true)</span>
    

    

    <p class="description">Pagination 컴포넌트가 로딩될 때 활성화시킬지 여부. false로 설정하는 경우에는 oPagination.activate()를 호출하여 따로 활성화 시켜줘야 한다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">nItem</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 10)</span>
    

    

    <p class="description">리스트의 전체 아이템 개수</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">nItemPerPage</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 10)</span>
    

    

    <p class="description">한 페이지에 표시 될 아이템의 개수를 정의한다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">nPagePerPageList</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 10)</span>
    

    

    <p class="description">페이지 목록에 표시 될 페이지의 개수를 정의한다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">nPage</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 1)</span>
    

    

    <p class="description">Pagination 컴포넌트가 로딩되었을 때 보여 주는 페이지이다. 기본값으로는 1이 설정된다. 아래의 이미지에서는 12페이지를 선택한 경우이다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">sMoveUnit</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(기본값 : &quot;pagelist&quot;)</span>
    

    

    <p class="description">이전/다음 버튼을 누르는 경우 한 페이지씩(page) 또는 페이지 목록(pagelist) 단위로 이동하게 해주는 설정 값이다.
	<ul>
	<li>pagelist : nPagePerPageList로 설정한 값 기준으로 이동한다.(기본값 기준으로 10페이지)</li>
	<li>page : 한 페이지 씩 이동한다.</li>
	</ul></p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">bAlignCenter</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
        <span class="default">(기본값 : false)</span>
    

    

    <p class="description">bAlignCenter 옵션 값은 현재 페이지가 항상 가운데에 오도록 정렬해주는 값이다. 이전 또는 다음 버튼을 눌러서 페이지를 이동하는 경우 이동 된 페이지가 중앙에 오게 된다.<br/>※ bAlignCenter를 사용할 때는 sMoveUnit이 항상 "page"로 설정되어야 한다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">sInsertTextNode</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(기본값 : &quot;&quot;)</span>
    

    

    <p class="description">페이지 목록에서 페이지의 마크업들을 연결해주는 문자열이다. 설정 값에 따라서 각각의 페이지를 보여주는 노드 (예 <a href="#">11</a><a href="#">12</a>에서 a태그)를 " " 또는 " "등으로 설정해서 변경할 수 있다. (위의 예에서는 a태그 사이의 간격이 한 줄 또는 하나의 공백문자로 변경되게 된다.)<br/>※ 주의할 점은 이 옵션에 따라 렌더링이 달라질 수 있다는 점이다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">sClassPrefix</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(기본값 : &quot;&quot;)</span>
    

    

    <p class="description">클래스명 접두어</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">sClassFirst</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(기본값 : &quot;first-child&quot;)</span>
    

    

    <p class="description">페이지 목록에서 첫 번째 페이지 항목에 추가되는 클래스명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">sClassLast</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(기본값 : &quot;last-child&quot;)</span>
    

    

    <p class="description">페이지 목록에서 마지막 페이지 항목에 추가되는 클래스명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">sPageTemplate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">1, 2, 3, .. 과 같은 페이지를 보여주는 엘리먼트를 어떤 마크업으로 보여줄 지를 설정한다. {=page}가 페이지 번호로 교체된다. (jindo.$Template 참고)<br/>기본 값 : <code>&lt;a href=&#x27;#&#x27;&gt;{=page}&lt;&#x2F;a&gt;</code></p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">sCurrentPageTemplate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">페이지 목록에서 보여주고 있는 현재 페이지를 어떻게 보여줄 지 설정하는 마크업 템플릿이다. {=page}가 현재 페이지 번호로 교체된다. (jindo.$Template 참고)<br/>기본 값 : <code>&lt;strong&gt;{=page}&lt;&#x2F;strong&gt;</code></p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">elFirstPageLinkOn</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">페이지 목록에서 페이지의 맨 처음으로 이동하는 버튼으로 사용되는 엘리먼트이다. 처음으로 이동할 수 있는 경우만 노출되며 값을 지정하지 않거나 <code>pre_end</code> 클래스 명을 가진 a 엘리먼트가 존재하지 않으면 버튼이 생성되지 않는다.<br/>기본 값 : 페이지 목록 엘리먼트 아래의 <code>pre_end</code> 클래스 명을 가지고 있는 a 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">elPrevPageLinkOn</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">페이지 목록에서 이전 페이지 또는 이전 페이지목록으로 이동하는 버튼으로 사용되는 엘리먼트이다. 이전으로 이동할 수 있는 경우만 노출되며 값을 지정하지 않거나 pre 클래스 명을 가진 a 엘리먼트가 존재하지 않으면 버튼이 생성되지 않는다.<br/>기본 값 : 페이지 목록 엘리먼트 아래의 pre 클래스 명을 가지고 있는 a 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">elNextPageLinkOn</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">페이지 목록에서 다음 페이지 또는 다음 페이지목록으로 이동하는 버튼으로 사용되는 엘리먼트이다. 다음으로 이동할 수 있는 경우만 노출되며 값을 지정하지 않거나 next 클래스 명을 가진 a 엘리먼트가 존재하지 않으면 버튼이 생성되지 않는다.<br/>기본 값 : 페이지 목록 엘리먼트 아래의 next 클래스 명을 가지고 있는 a 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">elLastPageLinkOn</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">페이지 목록에서 페이지의 맨 마지막으로 이동하는 버튼으로 사용되는 엘리먼트이다. 마지막으로 이동할 수 있는 경우만 노출되며 값을 지정하지 않거나 <code>next_end</code> 클래스 명을 가진 a 엘리먼트가 존재하지 않으면 버튼이 생성되지 않는다.<br/>기본 값 : 페이지 목록 엘리먼트 아래의 <code>next_end</code> 클래스 명을 가지고 있는 a 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">elFirstPageLinkOff</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">elFirstPageLinkOn과는 반대로 처음으로 이동할 수 없는 경우에 사용자에게 비활성화된 상태를 보여주기 위한 엘리먼트이다. 값을 지정하지 않거나 <code>pre_end</code> 클래스 명을 가진 span 엘리먼트가 존재하지 않으면 버튼이 생성되지 않는다.<br/>기본 값 : 페이지 목록 엘리먼트 아래의 <code>pre_end</code> 클래스 명을 가지고 있는 span 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">elPrevPageLinkOff</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">elPrevPageLinkOn과는 반대로 이전으로 이동할 수 없는 경우에 사용자에게 비활성화된 상태를 보여주기 위한 엘리먼트이다. 값을 지정하지 않거나 pre 클래스 명을 가진 span 엘리먼트가 존재하지 않으면 버튼이 생성되지 않는다.<br/>기본 값 : 페이지 목록 엘리먼트 아래의 pre 클래스 명을 가지고 있는 span 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">elNextPageLinkOff</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">elNextPageLinkOn과는 반대로 다음으로 이동할 수 없는 경우에 사용자에게 비활성화된 상태를 보여주기 위한 엘리먼트이다. 값을 지정하지 않거나 next 클래스 명을 가진 span 엘리먼트가 존재하지 않으면 버튼이 생성되지 않는다.<br/>기본 값 : 페이지 목록 엘리먼트 아래의 next 클래스 명을 가지고 있는 span 엘리먼트</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name optional">elLastPageLinkOff</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">elLastPageLinkOn과는 반대로 마지막으로 이동할 수 없는 경우에 사용자에게 비활성화된 상태를 보여주기 위한 엘리먼트이다. 값을 지정하지 않거나 <code>next_end</code> 클래스 명을 가진 span 엘리먼트가 존재하지 않으면 버튼이 생성되지 않는다.<br/>기본 값 : 페이지 목록 엘리먼트 아래의 <code>next_end</code> 클래스 명을 가지고 있는 span 엘리먼트</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">var oPagination = new jindo.Pagination("paginate", {
    nItem : 1000, //(Number) 전체 아이템 개수
    nItemPerPage : 10, //(Number) 한 페이지에 표시될 아이템 개수
    nPagePerPageList : 10, //(Number) 페이지목록에 표시될 페이지 개수
    nPage : 1, //(Number) 초기 페이지
    sMoveUnit : "pagelist", //(String) 페이지목록 이동시 이동 단위 "page" || "pagelist"
    bAlignCenter : false, //(Boolean) 현재페이지가 항상 가운데 위치하도록 정렬. sMoveUnit이 "page"일 때만 사용
    sInsertTextNode : "", //(String) 페이지리스트 생성시에 각각의 페이지 노드를 한줄로 붙여쓰지 않게 하기 위해서는 "\n" 또는 " "를 설정한다. 이 옵션에 따라 렌더링이 달라질 수 있다.
    sClassPrefix : "pagination-", //(String) 컴포넌트에서 사용되는 클래스의 Prefix 
    sClassFirst : "first-child", //(String) 첫번째 페이지리스트에 추가될 클래스명
    sClassLast : "last-child", //(String) 마지막 페이지리스트에 추가될 클래스명
    sPageTemplate : "&lt;a href='#'&gt;{=page}&lt;/a&gt;", //(String) 페이지에 대한 템플릿. {=page}부분이 페이지 번호로 대치된다. 
    sCurrentPageTemplate : "&lt;strong&gt;{=page}&lt;/strong&gt;", //(String) 현재페이지에 대한 템플릿. {=page}부분이 페이지 번호로 대치된다.
    elFirstPageLinkOn : (HTMLElement) '처음' 링크엘리먼트. 기본 값은 기준 엘리먼트 아래 pre_end 클래스명을 가지는 a 엘리먼트이다.
    elPrevPageLinkOn : (HTMLElement) '이전' 링크엘리먼트. 기본 값은 기준 엘리먼트 아래 pre 클래스명을 가지는 a 엘리먼트이다.
    elNextPageLinkOn : (HTMLElement) '다음' 링크엘리먼트. 기본 값은 기준 엘리먼트 아래 next 클래스명을 가지는 a 엘리먼트이다.
    elLastPageLinkOn : (HTMLElement) '마지막' 링크엘리먼트. 기본 값은 기준 엘리먼트 아래 next_end 클래스명을 가지는 a 엘리먼트이다.
    elFirstPageLinkOff : (HTMLElement) '처음' 엘리먼트. 기본 값은 기준 엘리먼트 아래 pre_end 클래스명을 가지는 span 엘리먼트이다.
    elPrevPageLinkOff : (HTMLElement) '이전' 엘리먼트. 기본 값은 기준 엘리먼트 아래 pre 클래스명을 가지는 span 엘리먼트이다.
    elNextPageLinkOff : (HTMLElement) '다음' 엘리먼트. 기본 값은 기준 엘리먼트 아래 next 클래스명을 가지는 span 엘리먼트이다.
    elLastPageLinkOff : (HTMLElement) '마지막' 엘리먼트. 기본 값은 기준 엘리먼트 아래 next_end 클래스명을 가지는 span 엘리먼트이다.
}).attach({
    beforeMove : function(oCustomEvent) {
        //페이지 이동이 수행되기 직전에 발생
        //전달되는 이벤트 객체 oCustomEvent = {
        //  nPage : (Number) 이동하려는 페이지
        //}
        //oCustomEvent.stop()을 수행하면 페이지 이동(move 이벤트)이 일어나지 않는다.
    },
    move : function(oCustomEvent) {
        //페이지 이동이 완료된 이후 발생
        //전달되는 이벤트 객체 oCustomEvent = {
        //  nPage : (Number) 현재 페이지
        //}
    },
    click : function(oCustomEvent) {
        //페이지 이동을 위한 숫자나 버튼을 클릭했을때 발생
        //전달되는 이벤트 객체 oCustomEvent = {
        //  nPage : (Number) 클릭해서 이동할 페이지
        //  weEvent : (jindo.$Event) click시 발생되는 jindo.$Event 객체
        //}
        //oCustomEvent.stop()을 수행하면 페이지 이동(beforeMove, move 이벤트)이 일어나지 않는다.
    }
});
</code></pre>
            </div>
        </div>
    
    
    
    
    

    

</div>

<!--
	
-->
	        
	    </div>
    

	
	
	
		<div class="tc-panel">
			<h2 id="method">메서드 세부 정보</h2>
	        
	            
<div id="method_activate" class="method item inherited-item">
	<h3>activate()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.UIComponent.js.html#l33" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>activate
( )
:<a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a></code></div>
	<div class="description"><p>컴포넌트를 활성화한다.
_onActivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onActivate 메서드가 정의되어야한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_attach" class="method item inherited-item">
	<h3>attach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l253" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>attach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 등록한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">fHandlerToAttach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 할 커스텀 이벤트 핸들러</p>

	
	
    
        <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">oCustomEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 객체</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 등록 방법 예제
//아래처럼 등록하면 appear 라는 사용자 이벤트 핸들러는 총 3개가 등록되어 해당 이벤트를 발생시키면 각각의 핸들러 함수가 모두 실행됨.
//attach 을 통해 등록할때는 이벤트명에 'on' 이 빠지는 것에 유의.
function fpHandler1(oEvent) { .... };
function fpHandler2(oEvent) { .... };

var oInst = new MyComponent();
oInst.onappear = fpHandler1; // 직접 등록
oInst.attach('appear', fpHandler1); // attach 함수를 통해 등록
oInst.attach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_deactivate" class="method item inherited-item">
	<h3>deactivate()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.UIComponent.js.html#l55" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>deactivate
( )
:<a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a></code></div>
	<div class="description"><p>컴포넌트를 비활성화한다.
_onDeactivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onDeactivate 메서드가 정의되어야한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detach" class="method item inherited-item">
	<h3>detach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l297" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">fHandlerToDetach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 해제 할 커스텀 이벤트 핸들러</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 해제 예제
oInst.onappear = null; // 직접 해제
oInst.detach('appear', fpHandler1); // detach 함수를 통해 해제
oInst.detach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detachAll" class="method item inherited-item">
	<h3>detachAll()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l335" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detachAll
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a></code></div>
	<div class="description"><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">이벤트명. 생략시 모든 등록된 커스텀 이벤트 핸들러를 해제한다.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Pagination.html" class="crosslink">jindo.Pagination</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//"show" 커스텀 이벤트 핸들러 모두 해제
oInst.detachAll("show");

//모든 커스텀 이벤트 핸들러 해제
oInst.detachAll();
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_fireEvent" class="method item inherited-item">
	<h3>fireEvent()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l180" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>fireEvent
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>이벤트를 발생시킨다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">oEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 핸들러에 전달되는 객체.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	<p class="description">핸들러의 커스텀 이벤트객체에서 stop메서드가 수행되면 false를 리턴</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//커스텀 이벤트를 발생시키는 예제
var MyComponent = jindo.$Class({
    method : function() {
        this.fireEvent('happened', {
            sHello : 'world',
            nAbc : 123
        });
    }
}).extend(jindo.Component);

var oInst = new MyComponent().attach({
    happened : function(oCustomEvent) {
        alert(oCustomEvent.sHello + '/' + oCustomEvent.nAbc); // 결과 : world/123
    }
});

&lt;button onclick="oInst.method();"&gt;Click me&lt;/button&gt; 
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getBaseElement" class="method item">
	<h3>getBaseElement()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l156" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getBaseElement
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>기준 엘리먼트를 구한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getCurrentPage" class="method item">
	<h3>getCurrentPage()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l206" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getCurrentPage
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></code></div>
	<div class="description"><p>현재 페이지를 리턴한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
	<p class="description">현재 페이지</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getFirstItemOfPage" class="method item">
	<h3>getFirstItemOfPage()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l216" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getFirstItemOfPage
(n:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></code></div>
	<div class="description"><p>해당 페이지의 첫번째 아이템이 전체 중 몇 번째 아이템인지 구한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">n</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">페이지 번호</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getItemCount" class="method item">
	<h3>getItemCount()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l166" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getItemCount
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></code></div>
	<div class="description"><p>전체 아이템의 개수를 리턴한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
	<p class="description">아이템 개수</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getItemPerPage" class="method item">
	<h3>getItemPerPage()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l186" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getItemPerPage
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></code></div>
	<div class="description"><p>한 페이지에 보여줄 아이템의 개수를 구한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
	<p class="description">한 페이지에 보여줄 아이템의 개수</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getPageOfItem" class="method item">
	<h3>getPageOfItem()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l227" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getPageOfItem
(n:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></code></div>
	<div class="description"><p>아이템의 인덱스로부터 몇번째 페이지인지를 구한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">n</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">아이템의 인덱스</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_isActivating" class="method item inherited-item">
	<h3>isActivating()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.UIComponent.js.html#l23" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>isActivating
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>컴포넌트의 활성여부를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_movePageTo" class="method item">
	<h3>movePageTo()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l359" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>movePageTo
(nPage:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, [bFireEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>])</code></div>
	<div class="description"><p>지정한 페이지로 이동하고 페이지 목록을 다시 그린다.
이동하기전 beforeMove, 이동후에 move 커스텀 이벤트를 발생한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">nPage</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">이동할 페이지</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name optional">bFireEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">커스텀 이벤트의 발생 여부 (디폴트 true)</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_option" class="method item inherited-item">
	<h3>option()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l33" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>option
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></code></div>
	<div class="description"><p>옵션 값을 가져온다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">옵션의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></span>
	<p class="description">옵션의 값</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_optionSetter" class="method item inherited-item">
	<h3>optionSetter()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l126" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>optionSetter
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></code></div>
	<div class="description"><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">setter의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
	<p class="description">setter 함수</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_reset" class="method item">
	<h3>reset()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l425" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>reset
(nItemCount:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>)</code></div>
	<div class="description"><p>페이징을 다시 그린다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">nItemCount</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">아이템의 개수가 바뀌었을 경우 설정해준다.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_setItemCount" class="method item">
	<h3>setItemCount()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l176" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>setItemCount
(n:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>)</code></div>
	<div class="description"><p>전체 아이템의 개수를 설정한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">n</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">아이템 개수</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_setItemPerPage" class="method item">
	<h3>setItemPerPage()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l196" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>setItemPerPage
(n:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)</code></div>
	<div class="description"><p>한 페이지에 보여줄 아이템의 개수를 설정한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">n</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">아이템 개수</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	    </div>
    
	
	
		<div class="tc-panel">
			<h2 id="event">이벤트 세부 정보</h2>
	        
	            <div id="event_beforeMove" class="event item">
	<h3>beforeMove
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l376" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>페이지 이동이 수행되기 직전에 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nPage</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">이동하게 될 페이지</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">stop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">페이지 이동을 정지한다</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oPagination.attach("beforeMove", function(oCustomEvent) {
    // 이동하게 될 페이지
    var nDstPage = oCustomEvent.nPage;

    // 만약, 페이지를 이동하고 싶지 않다면
    // oCustomEvent.stop()을 호출하여 중지할 수 있다.
    if( nDstPage === 0 ) {
        oCustomEvent.stop();
    }
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_click" class="event item">
	<h3>click
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l324" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>페이지 이동을 위한 숫자나 버튼을 클릭했을때 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nPage</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">클릭해서 이동할 페이지</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">weEvent</code>
        <span class="type">: jindo.$Event</span>
    

    

    <p class="description">클릭 이벤트 객체</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">stop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">페이지 이동을 정지한다</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oPagination.attach("click", function(oCustomEvent) {
    // 클릭한 페이지 번호
    var nClickedPage = oCustomEvent.nPage;

    // 만약, 페이지를 이동하고 싶지 않다면
    // oCustomEvent.stop()을 호출하여 중지할 수 있다.
    if( nClickedPage === 0 ) {
        oCustomEvent.stop();
    }
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_move" class="event item">
	<h3>move
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Pagination.js.html#l406" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>페이지 이동이 완료된 시점에서 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nPage</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">사용자 클릭의 결과로 이동한 페이지</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oPagination.attach("move", function(oCustomEvent) {
    // 사용자  클릭의 결과로 이동한 페이지
    var nCurrentPage = oCustomEvent.nPage;
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	    </div>
    

    
        <div class="tc-panel">
			<h2 id="demo">데모</h2>
			<div class="demo">
				<ul class="demo_list" id="demo_list">
		            
		                <li><a href="../../../demo/complex/2. pagination_in_layermanager.html" id="demo_24a9c7f1ad6fca2a43e21ead6632439d" title="레이어&nbsp;안에&nbsp;페이징을&nbsp;구현한&nbsp;예제입니다." target="_blank">레이어&nbsp;안에&nbsp;페이징</a></li>
		            
		                <li><a href="../../../demo/jindo.Pagination/1. nItemPerPage.html" id="demo_881d20965cd10eea9bba5f27a29533fa" title="nItemPerPage&nbsp;옵션에&nbsp;따라&nbsp;어떻게&nbsp;다르게&nbsp;동작하는지&nbsp;확인&nbsp;할&nbsp;수&nbsp;있는&nbsp;예제입니다." target="_blank">nItemPerPage&nbsp;값에&nbsp;따른&nbsp;차이</a></li>
		            
		                <li><a href="../../../demo/jindo.Pagination/2. nPagePerPageList.html" id="demo_76ecda9b02b1623dbae1144d228209a9" title="nPagePerPageList&nbsp;옵션에&nbsp;따라&nbsp;어떻게&nbsp;다르게&nbsp;동작하는지&nbsp;확인&nbsp;할&nbsp;수&nbsp;있는&nbsp;예제입니다." target="_blank">nPagePerPageList&nbsp;값에&nbsp;따른&nbsp;차이</a></li>
		            
		                <li><a href="../../../demo/jindo.Pagination/3. sMoveUnit.html" id="demo_1166fe5901f7d70918ed2744b9b24983" title="sMoveUnit&nbsp;옵션에&nbsp;따라&nbsp;어떻게&nbsp;다르게&nbsp;동작하는지&nbsp;확인&nbsp;할&nbsp;수&nbsp;있는&nbsp;예제입니다." target="_blank">sMoveUnit&nbsp;값에&nbsp;따른&nbsp;차이</a></li>
		            
		                <li><a href="../../../demo/jindo.Pagination/4. bAlignCenter.html" id="demo_3b6ae58b02e91756ffe73ffa95b107b2" title="bAlignCenter&nbsp;옵션에&nbsp;따라&nbsp;어떻게&nbsp;다르게&nbsp;동작하는지&nbsp;확인&nbsp;할&nbsp;수&nbsp;있는&nbsp;예제입니다." target="_blank">bAlignCenter&nbsp;값에&nbsp;따른&nbsp;차이</a></li>
		            
		                <li><a href="../../../demo/jindo.Pagination/5. template.html" id="demo_f75e893474c6252935adcebc5b296eba" title="템플릿을&nbsp;변경&nbsp;적용한&nbsp;예제입니다." target="_blank">템플릿을&nbsp;이용한&nbsp;다양한&nbsp;Pagination</a></li>
		            
		                <li><a href="../../../demo/jindo.Pagination/6. LinkOnOff.html" id="demo_4f3feef37b6195362003411c15894b50" title="버튼&nbsp;모양을&nbsp;변경하는&nbsp;예제입니다." target="_blank">버튼&nbsp;변경하기</a></li>
		            
		                <li><a href="../../../demo/jindo.Pagination/7. setMethods.html" id="demo_32425770cf8befda9bed867b71169847" title="setItemCount&nbsp;와&nbsp;setItemPerPage&nbsp;메서드&nbsp;사용함에&nbsp;따라&nbsp;어떻게&nbsp;동작하는지&nbsp;확인&nbsp;할&nbsp;수&nbsp;있는&nbsp;예제입니다." target="_blank">setItemCount&nbsp;와&nbsp;setItemPerPage&nbsp;메서드&nbsp;사용</a></li>
		            
		                <li><a href="../../../demo/jindo.Pagination/8. tutorial.html" id="demo_5e79d223c6206337ef3336d1b5d87587" title="Step&nbsp;By&nbsp;Step&nbsp;으로&nbsp;따라하며&nbsp;확인&nbsp;해&nbsp;볼&nbsp;수&nbsp;있는&nbsp;튜토리얼&nbsp;입니다." target="_blank">튜토리얼</a></li>
		            
	            </ul>
				<div class="demo_example" id="demo_example">
					<div class="clipboard" style="display:block">
						<p class="description" id="demo_desc"></p>
						<iframe src="about:blank" id="demo_iframe" name="demo_iframe" width="100%" height="366" frameborder="0"></iframe>
					</div>
				</div>
				<button type="button" id="btn_external" class="btn_external">새창으로 열기</button>
			</div>
        </div>
    
	    
	
	
	<div class="btn_top" id="btn_top">
		<a title="맨위로" href="#"><span class="blind">맨위로</span></a>
	</div>	

</div>
<!-- // content -->

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>